<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>照片墙</title>
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script src="../js/flexible.js"></script>

</head>
<body>
<h1 class="title-h1">手机模板——照片墙</h1>
<div class="photoWall">
    <ul class="photo-ul">
        <li class="photo-li" data-id="0">
            <img src="../image/timg01.png">
            <span class="photo-ect"></span>
        </li>
        <li class="photo-li" data-id="1">
            <img src="../image/timg.png">
            <span class="photo-ect"></span>
        </li>
    </ul>
</div>
<div class="photo-btn-height"></div>
<div class="photo-btn">
    <div class="img-add hasNone">
        <input type="file" id="fileAdd"  name="imgs[]" class="hidden" multiple="multiple"  accept="image/*" capture="camera" />
        <button type="button" class="imgAdd btn">上传图片</button>
    </div>
    <button type="button" class="imgDel btn hasNone">编辑图片</button>
    <button type="button" class="fileDel btn "></button>
</div>
<script>
    var fileL; //图片长度
    var tim; //上传时间=》data-id
    var img =new Array();
    var formData=new FormData();


    //编辑图片

        $(document).on('click', '.imgDel', function() {
        $(".hasNone").hide();//隐藏上传图片和编辑图片
        $(".fileDel").show();//显示删除按钮
        $(".photo-li").addClass("ect");//让图片可编辑
        $(".photo-btn-height").css("height",$(".photo-btn").height);
    });
    //删除图片
    $(document).on('click', '.fileDel', function() {
        var imgLength = $(".photo-li.active").length;
        $(".photo-li.active").remove();
        $(this).hide();//完成删除操作后，隐藏删除按钮。
        $(".hasNone").show();//完成删除操作后，显示上传图片和编辑图片按钮。
        $(".photo-li").removeClass("ect");//让图片可编辑
        $(".photo-btn-height").css("height",$(".photo-btn").height);
        alert("删除成功！");
//        setTimeout(function () { //删除成功后刷新页面
//            window.location.reload();
//        },1000)

    });
    // 是否选中图片，删除
    $(document).on('click', '.photo-li', function() {
        if($(this).hasClass("ect")){
            if($(this).hasClass("active")){
                $(this).removeClass("active"); //取消选中
            }else {
                $(this).addClass("active");//选中
            }
        }
    });


    
    $('.imgAdd').click(function(){//打开相册
        $("#fileAdd").click();
    });
    //添加图片
    $("#fileAdd").change(function (e) {
        file = e.target.files || e.dataTransfer.files;
        var index =$(this).val().lastIndexOf(".");
        console.log(index);
        var ext = $(this).val().substring(index + 1, $(this).val().length);
        console.log("文件类型："+ext);

        if(ext != "jpg" && ext!="png" && ext!="gif") {//判断图片格式
            alert("图片格式不正确");
            return false;
        }
        if(file){
            fileL = file.length;//图片长度
            for (var i=0; i<fileL;i++) {
                reader = new FileReader();
                //文件装载后将其显示在图片预览里
                console.log(reader);
                reader.onload = function (s) {
                    tim =parseInt(s.timeStamp);
                    $(".photo-ul").append("<li class='photo-li' data-id="+tim+">" +
                        "<img src=" + this.result + ">" +
                        "<span class=\"photo-ect\"></span>" +
                        "</li>");
                };
                //装载文件
                reader.readAsDataURL(file[i]);
                img.push($("#fileAdd")[0].files[i]);
            }
        }

        $.each(img,function(i,k){
            formData.append('img'+i,img[i],img[i].name);
        });

        formData.append('imgcount',img.length);
//        $.ajax({
//            type:"POST",
//            url :"",
//            data:formData,
//            contentType:false,
//            processData:false,
//            success:function(res){
//                if(res.code==0){
//
            alert("图片上传成功！");
//                    setTimeout(function(){
//                        window.location.reload();
//                    },1500)
//                }else{
//                    Massage(2,"失败提示",res.msg,2000);
//                }
//            }
//        });
    })
    
</script>
</body>
</html>